<template>
  <div>
    <!--     搜索条件-->
    <SearchForm @search="getTableData" @reset="clearSearch">
      <el-col :span="8" :xs="24" v-show="$permiss[514]">
        <el-form-item :label="$t('所属租户')" prop="adminUserId">
          <el-select v-model="page.adminUserId" style="width: 100%" clearable>
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('渠道名称')" prop="name">
          <el-input v-model="page.name"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('渠道类型')" prop="type">
          <el-select clearable style="width: 100%" v-model="page.type">
            <el-option :value="1" :label="$t('打款渠道')"></el-option>
            <el-option :value="2" :label="$t('还款渠道')"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('状态')" prop="status">
          <el-select clearable style="width: 100%" v-model="page.status">
            <el-option :value="1" :label="$t('启用')"></el-option>
            <el-option :value="0" :label="$t('禁用')"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </SearchForm>

    <el-card shadow="never" style="margin-top: 10px">
      <Table :table-column="tableColumn" :table-data="tableData" :page="page" @handleSizeChange="handleSizeChange"
             @handleCurrentChange="handleCurrentChange">
        <el-table-column :label="$t('状态')" align="center">
          <template slot-scope="{row}">
            <el-switch @change="changeStatus(row)" :disabled="!$permiss[560]" :value="row.status === 1 ? true : false"></el-switch>
          </template>
        </el-table-column>
      </Table>
    </el-card>
  </div>
</template>

<script>
import {selectTenant} from "@/api/system";
import {onlineChannelList,onlineUpdateStatus} from '@/api/pay'
export default {
  name: 'onlinePay',
  data() {
    return {
      tenantList: [],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      tableColumn: [
        {label: this.$t('渠道名称'), prop: 'name'},
        {label: this.$t('渠道类型'), prop: 'type'},
        {label: this.$t('APP名称'), prop: 'appName'},
        {label: this.$t('备注'), prop: 'describe'},
      ]
    }
  },
  async mounted() {
    this.tenantList = await selectTenant().then(res=>res.data)
    this.tenantList.length > 0 ? this.page.adminUserId = this.tenantList[0].adminUserId : ''
    this.getTableData()
  },
  methods: {
    async getTableData() {
      const res = await onlineChannelList(this.page)
      if (res.code === 1) {
        const {list, pageNum, pageSize, total} = res.data
        this.page = Object.assign({}, this.page, {
          pageNum: pageNum,
          pageSize: pageSize,
          total: total
        })
        this.tableData = list.map(item => {
          item.type = item.type === 1 ? this.$t('打款渠道') : this.$t('还款渠道')
          return item
        })
      }
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    async changeStatus(row) {
      const res = await onlineUpdateStatus({
        status: row.status === 1 ? 0 : 1,
        id: row.id
      })
      if (res.code === 1) {
        this.$message.success(this.$t('修改成功'))
        this.getTableData()
      }
    },
    clearSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      this.getTableData()
    }
  }
}
</script>

<style scoped>

</style>
